<template>
	<div class="app-content addTask">
		<div class="textarea_wrap">
			<textarea v-model="form.copywriting" placeholder="请输入海报标题...." placeholder-class="ph" :maxlength="200"></textarea>
			<div class="count">{{currentNum}}/200</div>
		</div>
		<div class="generalize-content">
			<!-- 图片上传 -->
			<uploader :max-count="maxCount" :imgList.sync="imageArr" :size="230" :multiple="false" :num="1" />
			<div class="prompt-text">* 建议尺寸大小为：宽750px，长1114px</div>
		</div>

		<div class="input_wrap">
			<picker mode="selector" :range="catArr" :value="index" @change="remindTimeChange" range-key="text">
				<div class="input_box">
					<div class="left">
						<div class="label">分类</div>
						<span class="content">{{catArr[index].text}}</span>
					</div>
					<view class="iconfont iconjiantou"></view>
				</div>
			</picker>
		</div>

		<div class="generalize-save" @click="save">上传</div>
	</div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { add, getClassList } from '@/api/poster'
import { pushTeamNum } from '@/api/getGuest/index'
import AppWrapperEmpty from '@/components/App_wrapper_empty'
import uniPopup from '@/components/uni-popup/uni-popup'
import qs from 'qs'
import uploader from '@/components/App_uploader'
import { upLoadImg } from '@/utils/common'

export default {
	name: 'addTask',
	components: {
		AppWrapperEmpty,
		uploader,
		uniPopup
	},
	data() {
		return {
			option: {},
			index: 0,
			maxCount: 1,
			isCatType: false,
			catArr: [{ text: '请选择分类', id: null }],
			// catArr: [],
			imageArr: [],
			form: {
				cat_id: '',
				copywriting: '',
				image_path: ''
			}
		}
	},
	onLoad(option) {
		this.option = option
		this.getClassList()
	},
	computed: {
		currentNum() {
			return this.form.copywriting.length
		}
	},
	methods: {
		getClassList() {
			getClassList().then(res => {
				if (res.status === 'success') {
					let newArr = res.data[0].cat_list.map(i => ({
						text: i.cat_name,
						id: i.cat_id
					}))
					this.catArr = [...this.catArr, ...newArr]
				}
			})
		},
		save() {
			this.form.image_path = this.imageArr.join()
			if (!this.form.copywriting) {
				uni.showToast({
					title: '请输入海报标题! ',
					icon: 'none'
				})
				return false
			}
			if (!this.form.image_path) {
				uni.showToast({
					title: '请上传海报图片! ',
					icon: 'none'
				})
				return false
			}
			if (!this.form.cat_id) {
				uni.showToast({
					title: '请选择海报分类! ',
					icon: 'none'
				})
				return false
			}

			add({
				...this.form
			}).then(res => {
				if (res.status === 'success') {
					uni.showToast('保存成功')
					this.reset()
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		},
		remindTimeChange(e) {
			console.log(e)
			this.index = e.target.value
			this.form.cat_id = this.catArr[this.index].id
		},
		reset() {
			this.index = 0
			this.catArr = [{ text: '请选择分类', id: null }]
			this.imageArr = []
			this.form = {
				cat_id: '',
				copywriting: '',
				image_path: ''
			}
		}
	}
}
</script>

<style lang="scss" scope>
	.textarea_wrap textarea {
		box-sizing: border-box;
		border-bottom: 1px solid #ddd;
	}
	.title {
		padding: 29px 30px 21px;
		font-size: 30px;
		color: rgba(102, 102, 102, 1);
	}
	.generalize-content {
		background-color: #ffffff;
		margin-bottom: 20px;
		padding-top: 20px;
		// padding: 30px;
	}
	.generalize-save {
		width: 690px;
		height: 90px;
		background: rgba(255, 209, 26, 1);
		border-radius: 45px;
		margin: 60px auto 40px;
		text-align: center;
		line-height: 88px;
		color: #3a1b04;
		font-size: 32px;
	}
	.input_wrap {
		padding-left: 30px;
		background-color: #fff;
		.input_box {
			border-top: 1px solid rgba(238, 238, 238, 1);
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 30px;
			.label {
				width: 211px;
				font-size: 28px;
				color: rgba(102, 102, 102, 1);
			}
			input {
				flex: 1;
				height: 100%;
				border: 0 none;
				line-height: 55px;
			}
			.left {
				height: 100%;
				display: flex;
				align-items: center;

				.content {
					font-size: 28px;
					color: rgba(51, 51, 51, 1);
				}
			}
			.iconjiantou {
				color: rgba(204, 204, 204, 1);
			}
		}
	}
	.prompt-text {
		color: $fontColor3;
		margin: 10px 0 0 30px;
		padding-bottom: 30px;
	}
</style>
